<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTextStyle: '#0000FF',
    navigationBarTitleText: '我的',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#a8dced',
  },
}
</route>
<template>
  <view class="w-[100vw] h-[100vh] box-border content">
    <wd-card title="基本信息" class="mb-[20px]">
      <view class="topBox">
        <view>
          <view class="flexBox mb-[10px]">
            <text class="text-[16px] text-[black] mr-[15px]">{{ userInfo?.nickName }}</text>
            <wd-img :width="20" :height="20" src="../../static/boy.png" />
          </view>
          <view class="flexBox mb-[5px">
            <text class="text-[12px] mr-[15px]">部门</text>
            <text class="text-[black]">{{ deptName || '暂无' }}</text>
          </view>
          <view class="flexBox mb-[5px">
            <text class="text-[12px] mr-[15px]">电话</text>
            <text class="text-[black]">{{ userInfo?.phonenumber || '暂无' }}</text>
          </view>
          <view class="flexBox mb-[5px">
            <text class="text-[12px] mr-[15px]">邮箱</text>
            <text class="text-[black]">{{ userInfo?.email || '暂无' }}</text>
          </view>
        </view>
        <wd-img v-if="userInfo.avatar" :width="70" round :height="70" :src="userInfo.avatar" />
        <wd-img v-else :width="70" :height="70" round src="../../static/bg.jpg" />
      </view>
    </wd-card>
    <view class="p-[32upx] pt-0 rounded-[10upx]">
      <wd-cell-group border>
        <wd-cell
          title="人事信息"
          is-link
          @click="goPath('/pages/mine/basicInformation/index')"
        ></wd-cell>
        <wd-cell title="密码修改" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="敬请期待" is-link></wd-cell>
        <wd-cell title="退出登录" is-link @click="goOut"></wd-cell>
      </wd-cell-group>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useSysStore } from '@/store/systemInfo'
import { getDeptData } from '@/api/mine'

defineOptions({
  name: 'Mine',
})

const sysStore = useSysStore()
const userInfo = ref({})
const deptList = ref([])
const deptName = ref('')

// 登出系统
const goOut = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        sysStore.loginOut()
        uni.reLaunch({
          url: '/pages/login/index',
        })
      }
    },
  })
}
const goPath = (path) => {
  uni.navigateTo({
    url: path,
  })
}
// 获取部门数据
const getDeptList = async () => {
  const res = await getDeptData()
  deptList.value = res.data.data
  console.log(res, 1111)
}

// 获取部门名称
const getDeptName = (id, list) => {
  // 定义递归函数进行深度优先搜索
  const findLabel = (targetId, nodes) => {
    // 查找当前层级中匹配的节点
    const node = nodes.find((item) => item.id === targetId)
    if (node) {
      return node.label
    }
    // 若当前层级未找到，递归查找子节点
    for (const item of nodes) {
      if (item.children && item.children.length > 0) {
        const result = findLabel(targetId, item.children)
        if (result) {
          return result
        }
      }
    }
    return ''
  }
  return findLabel(id, list)
}

onLoad(async () => {
  console.log(sysStore.userInfo, 3333)
  await getDeptList()
  userInfo.value = sysStore.userInfo
  deptName.value = getDeptName(userInfo.value.deptId, deptList.value)
})
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  align-items: center;
}
.content {
  // background-color: #a8dced;
  background-image: linear-gradient(#a8dced, transparent);
  .topBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
:deep(.wd-cell-group) {
  border-radius: 10upx !important;
}
:deep(.wd-cell-group__body) {
  border-radius: 10upx !important;
}
</style>
